<template>
  <div class="cont">

    <el-table :data="arr">
      <el-table-column label="编号" prop="avator" v-slot:default="{ row }">
        {{ row.id }}
      </el-table-column>
      <el-table-column label="日期" width="200" prop="username" type="index" v-slot:default="{ row }">
        <span style="margin-left: 10px">
          {{ new Date(row.update_time).toLocaleString() }}
        </span>
      </el-table-column>
      <el-table-column label="用户名" prop="username"></el-table-column>
      <el-table-column label="头像" prop="avator" v-slot:default="{ row }">
        <img :src="`https://www.chengzier.cn:8000/` + row.avator" alt="" class="img_url">
      </el-table-column>
      <el-table-column label="邮箱" prop="email"></el-table-column>
      <el-table-column label="手机号" prop="phone"></el-table-column>
      <el-table-column label="操作" v-slot:default="{ row }">
        <el-button size="mini" type="danger" @click="openDelectTitle(row)">删除</el-button>
      </el-table-column>
    </el-table>

    <el-pagination class="el_pagin" background layout="prev, pager, next" :total="pageInfo.pageTotal"
      :page-size="pageInfo.pageSize" @current-change="handleCurrentPage" @next-click="handleNext"
      @prev-click="handlePrev">
    </el-pagination>
  </div>
</template>

<script>
// 引入查询管理员接口
import { querymin } from '@/api/User'
// 引入删除管理员接口
import DelectAdmin from '@/api/DelectAdmin'

export default {
  name: 'QueryAdmin',
  data() {
    return {
      tableData: [],
      arr: [],
      pageInfo: {
        currentPage: 1, //当前页数
        pageSize: 22, //每页显示数据
        pageTotal: 0 //总数
      }
    }
  },
  methods: {
    // 删除当前管理员
    openDelectTitle(row) {
      //管理员id  ==> row.id

      // 删除弹出提示框
      this.$confirm('此操作将永久删除该管理员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        // 调用删除管理员接口
        DelectAdmin.Delect(this.$store.state.token, row.id).then(res => {
          if (res.data.status == 'success') {
            this.$message({
              message: res.data.msg,
              type: 'success'
            })
            location.reload()
          } else {
            this.$message.error("删除管理员失败")
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
      
    },
    // 获取用户信息
    getAdminInfo() {
      return new Promise((reslove, rej) => {
        querymin(this.$store.state.token).then(res => {
          // 获取用户信息
          if (res.data.status == 'success') {
            // 获取成功提示消息
            this.$message({
              message: res.data.msg,
              type: 'success'
            })
            // 将数据存放在tableData中
            this.tableData = res.data.data
            //数据长度赋值给最大页数
            this.pageInfo.pageTotal = res.data.data.length
            reslove()
          } else {
            // 获取失败提示信息
            this.$message.error('获取管理员信息失败')
          }
        })
      })
    },
    // 获取当前页数
    handleCurrentPage(newValue) {
      this.arr = this.tableData.slice((newValue - 1) * this.pageInfo.pageSize, newValue * this.pageInfo.pageSize)
    },
    // 下一页
    handleNext(value) {
      this.arr = this.tableData.slice((value - 1) * this.pageInfo.pageSize, value * this.pageInfo.pageSize)
    },
    // 上一页
    handlePrev(value) {
      this.arr = this.tableData.slice((value - 1) * this.pageInfo.pageSize, value * this.pageInfo.pageSize)
    }
  },
  // 首次挂载时获取用户信息
  mounted() {
    this.getAdminInfo().then(res => {
      this.arr = this.tableData.slice(0, 22)
    })
  }
}
</script>

<style scoped>
/* .cont {
  margin: 30px;
} */

.img_url {
  width: 30px;
  height: 30px;
}

.el_pagin {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>